<template>
  <span class="E-animated-integer">{{ tweeningValue }}</span>
</template>

<script>
// eslint-disable-next-line import/no-extraneous-dependencies
import TWEEN from 'tween.js';

export default {
  props: {
    value: {
      type: Number,
      required: true
    },
    delay: {
      type: Number,
      default: 500
    }
  },
  data() {
    return {
      tweeningValue: 0
    };
  },
  watch: {
    value(newValue, oldValue) {
      this.tween(oldValue, newValue);
    }
  },
  mounted() {
    this.tween(0, this.value);
  },
  methods: {
    tween(startValue, endValue) {
      const vm = this;
      function animate() {
        if (TWEEN.update()) {
          requestAnimationFrame(animate);
        }
      }

      // eslint-disable-next-line func-names
      new TWEEN.Tween({ tweeningValue: startValue }).to({ tweeningValue: endValue }, vm.delay).onUpdate(function () {
        vm.tweeningValue = this.tweeningValue.toFixed(0);
      }).start();

      animate();
    }
  }
};
</script>
